<!DOCTYPE html>
<html>	
<head>
<meta charset="utf-8"> 
<title>整车数据模型生成工具</title> 
<script src="static/go-debug.js"></script>
<link rel="stylesheet" href="static/style.min.css">
<script src="static/jquery.min.js"></script>
<script src="static/jstree.min.js"></script>

<style> 
@font-face{font-family:Manrope;src:url(static/Manrope-VariableFont_wght.ttf) format("truetype")}

body{
    min-width: 320px;
    width: 100%;
    margin: 0;
    line-height: 1.5;
    background: #EEEFF0;
    overflow-x:hidden;
    -webkit-tap-highlight-color: transparent;
    font-family:Manrope
}*,
::before,
::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /* 针对移动端 */
    -webkit-tap-highlight-color: transparent;
}


.sdvos_top_banner
{
    width: 100%;
	height:70px;
	border-width:0;
    background-color: #007BC2;
}
.sdvos_bottom_banner
{
    width: 100%;
	height:44px;
	border-width:0;
    background-color: #164293;
	position:absolute;
	bottom:0px;
	left:0px;
}
.sdvos_topleft_title
{
	margin-top:12px;
	margin-left:5px;
}
.sdvos_topright_logo
{
	margin-top: 5px;
	margin-left: 5px;
	float: right;
}
.sdvos_mid_top_img
{
	position: absolute;
	top:80px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
.sdvos_gen_status_text
{
	margin-top: 25px;
	width: 100%;
	text-align: center;
	color: #000;
	opacity: 0.9;
	display: inline-block;
	font-size: x-large;
}
.main_box
{
	position: absolute;
	top:214px;
	left: 0;
	right: 0;
	bottom: 43px;
	display: flex;
	justify-content: space-between;
}

.sdvos_vss_tree {
  float: left;
  width: 60%;
  height: 100%;
  margin:5px;
   background-image: url(static/sdvos_vss_bg.png);
   background-repeat: no-repeat, repeat;
   background-size:98% 98%;
}

.sdvos_dom_tree {
  height: 100%;
  width: 40%;
  margin:5px;
  background-image: url(static/sdvos_dom_bg.png);
  background-repeat: no-repeat, repeat;
  background-size:98% 98%;
}

.all_vss_tree
{
	margin-top:45px;
	margin-left:10px;
	border:1px solid #FBB03B;
	/* border-radius:25px;  */
	width:50%;
	height:90%;
	float:left;
    overflow: auto;
}
.all_vss_tree_title_bar
{
	background-color:#FBB03B;
}

.all_vss_tree_cnt
{
	margin: 5px;
}
.vss_tree_selected
{
	margin-top:45px;
	margin-left:590px;
	border:1px solid #007BC2;
	/* border-radius:25px;  */
	width:45%;
	height:55%;
    overflow: auto;
}

.vss_tree_selcted_title_bar
{
	background-color:#007BC2;
}

.vss_tree_desc
{
	margin-top:8px;
	margin-left:590px;
	border:1px solid #662D91;
	/* border-radius:25px;  */
	width:45%;
	height:34%;
}

.vss_tree_desc_title_bar
{
	background-color:#662D91;
}

.vss_tree_desc_cnt
{
	margin: 5px;
}

.vss_tree_selcted_cnt
{
	margin: 5px;
}

.sdvos_dom_tree_title
{
	margin-top:5px;
	width:100%;
	height:24px;
	/* background-color:#662D91; */
	text-align: center;
}
.sdvos_dom_tree_box
{
	margin:10px;
	width:95%;
	height:90%;
	/* background-color:#662D91; */
}

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 2px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 8px 4px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
	float: right;
}

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;
}

.button2 {
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
}

.button2:hover {
    background-color: #008CBA;
    color: white;
}

.button3 {
    background-color: white; 
    color: black; 
    border: 2px solid #f44336;
}

.button3:hover {
    background-color: #f44336;
    color: white;
}

.button4 {
    background-color: white;
    color: black;
    border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
    background-color: white;
    color: black;
    border: 2px solid #555555;
}

.button5:hover {
    background-color: #555555;
    color: white;
}

.button6 {
    background-color: white;
    color: black;
    border: 2px solid orange;
}

.button6:hover {
    background-color: orange;
    color: white;
}
#progress{
            width: 90%;
            height: 30px;
            border:1px solid #ccc;
            border-radius: 15px;
            margin: 50px 0 0 100px;
            overflow: hidden;
            box-shadow: 0 0 5px 0px #ddd inset;
        }
        #progress span {
            display: inline-block;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* W3C */
            background-size: 60px 30px;
            text-align: center;
            color:#fff;
            -webkit-animation:load 3s ease-in;
        }
        @-webkit-keyframes load{
            0%{
                width: 0%;
            }
            100%{
                width:100%;
            }
        }
</style>
</head>
<body>

<div class="sdvos_top_banner">
	<img class="sdvos_topleft_title" src="static/sdvos_title.png"></img>
	<img class="sdvos_topright_logo" src="static/sdvos_etas_logo.png"></img>
</div>
<div class="sdvos_main_cnt">
	<div class="sdvos_mid_top">
	
	<!-- <img class="sdvos_mid_top_img" src="static/sdvos_progress_bg.png"></img> -->

		<p class="sdvos_gen_status_text" >正在生成整车数据模型...</p>
        <div id="progress">
            <span id="progressSpan"></span>
        </div>
	</div>
	<div class="main_box">
		<div class="sdvos_vss_tree">
			<div class="all_vss_tree">
				<div class="all_vss_tree_title_bar">VSS全部列表</div>
				<div  id="leftTree" class="all_vss_tree_cnt">
					
				</div>
			</div>
			<div class="vss_tree_selected">
				<div class="vss_tree_selcted_title_bar">VSS配置列表</div>
				<div id="rightTree" class="vss_tree_selcted_cnt"> </div>
			</div>
			<div class="vss_tree_desc">
				<div class="vss_tree_desc_title_bar">VSS属性</div>
                <div class="vss_tree_desc_cnt" id="vssName">NAME: sensor</div>
				<div class="vss_tree_desc_cnt" id="vssType">TYPE: sensor</div>
				<div class="vss_tree_desc_cnt" id="vssDesc">DESC: sensor</div>
				<div class="vss_tree_desc_cnt" id="vssDatatype">DATATYPE: sensor</div>
				<div class="vss_tree_desc_cnt" id="vssUuid">UUID: sensor</div>
			</div>
		</div>
		<div class="sdvos_dom_tree">
			<div class="sdvos_dom_tree_title">VSS DOM TREE</div>
			<div class="sdvos_dom_tree_box" id="myDiagramDiv"></div>
		</div>
	</div>
</div>
<div class="sdvos_bottom_banner">
	<div class="button button5" onclick="genModel()">生成整车模型</div>
    <div class="button button6" onclick="exportJson()">导出VSS</div>
	<div class="button button4" onclick="clearItem()">清空</div>
	<div class="button button3" onclick="deleteItem()">减配</div>
	<div class="button button2" onclick="copyItem()">增配</div>
	<div class="button button1" onclick="importJson()">导入VSS</div>
    <input type="file" accept="json" id="selectfile" style="display: none;">
</div>

</body>
<script>
var $$ = go.GraphObject.make;
var myDiagram =
        $$(go.Diagram, "myDiagramDiv",
          {
                "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
                layout: $$(go.TreeLayout, // specify a Diagram.layout that arranges trees
                                  { angle: 90, layerSpacing: 35 })
        });
// the template we defined earlier
myDiagram.nodeTemplate =
        $$(go.Node, "Vertical",
          { background: "#4499ff" },
          $$(go.Panel, "Horizontal",
                { margin: 5, width: 140, height: 50, background: "#ccc" },
                $$(go.Picture,
                  { margin: 2, width: 40, height: 25, background: "#ccc" },
                  new go.Binding("source")),
                $$(go.TextBlock, "Default Text",
                  { margin: 5, stroke: "white", font: "bold 16px sans-serif" },
                  new go.Binding("text", "name"))
           ),
          $$(go.Panel,  // this is underneath the "BODY"
                { height: 17 },  // always this height, even if the TreeExpanderButton is not visible
                $$("TreeExpanderButton")
           )
         );
// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
        $$(go.Link,
          { routing: go.Link.Orthogonal, corner: 5 },
          $$(go.Shape, { strokeWidth: 3, stroke: "#555" })); // the link shape
var model = $$(go.TreeModel);
model.nodeDataArray =
        [
        // { key: "1",              name: "Vehicle",   source: "static/Picture1.png" },
        // { key: "2", parent: "1", name: "Body",    source: "static/Picture1.png" },
        // { key: "3", parent: "1", name: "Cabin",   source: "static/Picture1.png" },
        // { key: "4", parent: "3", name: "HVAC", source: "static/Picture1.png" },
        // { key: "5", parent: "3", name: "Seat",     source: "static/Picture1.png" },
        // { key: "6", parent: "2", name: "Train", source: "static/Picture1.png" }
];
myDiagram.model = model;


//////////////////////////////////////////////////////////////////////////////////////////////
    jQuery.noConflict();
    jQuery(document).ready(function(){
        jQuery('#leftTree').jstree({
		'core' : {
			'data' : {
				"url" : "/load",
				"dataType" : "json"
			}
		},
        "checkbox" : {
                "keep_selected_style" : false,
                'three_state' : true,
                'tie_selection' : true
        },
        "plugins": ["checkbox","wholerow"]
	    }).bind("select_node.jstree", function(e, data) { 
            jQuery('#vssName')[0].innerText= "NAME: "+data.node.text;
            jQuery('#vssType')[0].innerText= "TYPE: "+data.node.a_attr.type;
            jQuery('#vssDesc')[0].innerText= "DESC: "+data.node.a_attr.description;
            jQuery('#vssDatatype')[0].innerText= "DATATYPE: "+data.node.a_attr.datatype;
            jQuery('#vssUuid')[0].innerText= "UUID: "+data.node.id;
        });
    });


    function copyItem(){
        var tree = jQuery("#leftTree").jstree(); 
        var selectedData = tree.get_selected(true); 
        var newTreeData = [], 
        nodesAdded = [], 
        checking; 

        for (var i = 0; i < selectedData.length; i++) { 
            checking = selectedData[i]; 
            do { 
            if (nodesAdded.indexOf(checking.id) == -1) { 
                newTreeData.push({ 
                    id: checking.id, 
                    parent: checking.parent, 
                    text: checking.text 
                }); 
            nodesAdded.push(checking.id); 
            checking = tree.get_node(checking.parent); 
            } else { 
            break; 
            } 
            } while (checking.id != '#') 
        } 

        jQuery("#rightTree").jstree({ 
            "checkbox": { 
                "keep_selected_style": false,
                'three_state' : true,
                'tie_selection' : true 
            }, 
            "plugins": ["checkbox", "wholerow"], 
            // "core": { 
            // "data": newTreeData 
            // }, 
        }); 
        jQuery('#rightTree').jstree(true).settings.core.data = newTreeData;
        jQuery('#rightTree').jstree(true).refresh();
        jQuery('#rightTree').on({ 
            'refresh.jstree': function() { 
            jQuery(this).jstree("open_all");
            loadGoTree();
            }
        }); 

        

    }

    function loadGoTree(){
        var tempTree = [];
        var data = jQuery("#rightTree").jstree(true)._model.data;
        for(key in data) {
            if(key!='#'){
                var treeNode = {key: data[key].id,parent: data[key].parent,name: data[key].text,source:"static/Picture1.png"};
                tempTree.push(treeNode);
            }
        }
        model.nodeDataArray=tempTree;  
    }

    function deleteItem(){
        var ref = jQuery('#rightTree').jstree(true);
        sel = ref.get_selected();
        ref.settings.core.check_callback=true;
        ref.delete_node(sel);
        loadGoTree();
        // ref.refresh();
    }

    function clearItem(){
        jQuery('#rightTree').jstree(true).settings.core.data = [];
        jQuery('#rightTree').jstree(true).refresh();
        model.nodeDataArray=[];
    }

    function importJson(){
        jQuery("#selectfile").click();
    }

    jQuery("#selectfile").change(function() {
		var url = '/importJson';
		var form = new FormData();
		var file = jQuery("#selectfile")[0].files;
		form.append("myfile", new Blob(file));
		var xhr = new XMLHttpRequest(); 
		xhr.open("post", url, true); 
		xhr.send(form); // 开始上传，发送form数据
		xhr.onload = function() {
			jQuery("#rightTree").jstree({ 
            "checkbox": { 
                "keep_selected_style": false,
                'three_state' : true,
                'tie_selection' : true 
            }, 
            "plugins": ["checkbox", "wholerow"], 
            // "core": { 
            // "data": newTreeData 
            // }, 
            }); 
            jQuery('#rightTree').jstree(true).settings.core.data = eval('(' + xhr.response + ')');
            jQuery('#rightTree').jstree(true).refresh();
            jQuery('#rightTree').on({ 
                'refresh.jstree': function() { 
                jQuery(this).jstree("open_all"); 
                loadGoTree();
                } 
            }); 
		}
    });

    function exportJson(){
        var ids = [];
        var data = jQuery("#rightTree").jstree(true)._model.data;
        for(key in data) {
            if(key!='#'){
                ids.push(data[key].id);
            }
        }
        jQuery.ajax({
            type : "post",
            url : "/export",
            data : JSON.stringify(ids),
            success : function(data) {
                var link = document.createElement("a");
                link.download = 'vss_export.json';
                link.href = 'static/vss_export.json';
                link.click();
            }

        });
    }

    function genModel(){
        jQuery("#progressSpan")[0].style.display='none';
        var ids = [];
        var data = jQuery("#rightTree").jstree(true)._model.data;
        for(key in data) {
            if(key!='#'){
                ids.push(data[key].id);
            }
        }
        jQuery.ajax({
            type : "post",
            url : "/genModel",
            data : JSON.stringify(ids),
            success : function(data) {
                jQuery("#progressSpan")[0].style.display='block';
            }

        });
    }

    jQuery("#progressSpan")[0].style.display='none';
    
</script>
</html>